//账期详情
import React, { useState, useEffect } from 'react';
import { Button, Descriptions, Alert } from 'antd';
import CommonModal from '@/components/CommonModal';
import CommonTable from '@/components/CommonTable';
import CommonLoading from '@/components/CommonLoading';
import { queryCreditLog } from '../../service';
import styles from '../styles.module.less';

const PeriodInformation = ({ visible, record, handleCancel }) => {

  //详情的数据
  const [detailData, setDetailData] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (visible) {
      getDetail();
    }
  }, [visible]);

  //获取账期日志
  const getDetail = async () => {
    setLoading(true);
    setDetailData([]);
    const { success, data = [] } = await queryCreditLog({
      contractNo: record.contractNo,
      period: record.period,
    });
    if (success) {
      setDetailData(data);
    }
    setLoading(false);
  };

  //取消
  const onCancel = () => {
    handleCancel();
  };

  const columns = [
    {
      title: '操作人',
      dataIndex: 'operationName',
      key: 'operationName',
      width: 80,
    },
    {
      title: '时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 100,
    },
    {
      title: '操作页面',
      dataIndex: 'operationPage',
      key: 'operationPage',
      width: 60,
    },
    {
      title: '操作功能',
      dataIndex: 'operationType',
      key: 'operationType',
      width: 60,
    },
    {
      title: '操作日志',
      dataIndex: 'eventContent',
      key: 'eventContent',
      width: 160,
      render: (text) => <div dangerouslySetInnerHTML={{ __html: text }}></div>,
    },
  ];

  // 详情table的数据
  const tableProps = {
    data: detailData,
    columns: columns,
    size: 'small',
    rowKey: 'createTime',
    scroll: { x: 340 },
  };

  return (
    <CommonModal
      title="账期详情"
      visible={visible}
      footer={[
        <Button key="cancel" onClick={onCancel}>
          关闭
        </Button>,
      ]}
      onCancel={onCancel}
      width={1000}
    >
      <div className="zjf-container">
        <Descriptions>
          <Descriptions.Item span={1} label="供应商名称">
            {record.storeName}
          </Descriptions.Item>
          <Descriptions.Item span={2} label="期数">
            {record.period}
          </Descriptions.Item>
          <Descriptions.Item span={1} label="剩余应还金额（元）">
            {record.lastAmount}
          </Descriptions.Item>
          <Descriptions.Item span={2} label="最终还款日">
            {record.repaymentTime}
          </Descriptions.Item>
        </Descriptions>
        <div className={styles.tips}>
          <Alert
            style={{ marginBottom: '24px' }}
            message="注意：账期出账后5天内必需还清"
            type="warning"
            showIcon
          />
        </div>
        <CommonTable {...tableProps} />
      </div>
      <CommonLoading loading={loading} />
    </CommonModal>
  );
};

export default React.memo(PeriodInformation, (prev, next) => {
  if (prev.visible !== next.visible || prev.detailData !== next.detailData) {
    return false;
  }
  return true;
});
